﻿<!DOCTYPE html>
<html class="no-js" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="meta description">

    <title>单一商品</title>
  <link rel="shortcut icon" type="image/x-icon" th:href="@{/img/timg.jpg}" media="screen"/>
<!--== Google Fonts ==-->
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,400i,500,600,700" rel="stylesheet">
<link rel="stylesheet" th:href="@{/css/alert.css}">
    <!--=== Bootstrap CSS ===-->
<link th:href="@{/assets2/css/vendor/bootstrap.min.css}" rel="stylesheet">
<!--=== Font-Awesome CSS ===-->
<link th:href="@{/assets2/css/vendor/font-awesome.css}" rel="stylesheet">
<!--=== Plugins CSS ===-->
<link th:href="@{/assets2/css/plugins.css}" rel="stylesheet">
<!--=== Helper CSS ===-->
<link th:href="@{/assets2/css/helper.min.css}" rel="stylesheet">
<!--=== Main Style CSS ===-->
<link th:href="@{/assets2/css/style.css}" rel="stylesheet">

<link rel="stylesheet" th:href="@{/css/default.css}">

<link rel="stylesheet" th:href="@{/css/singleShop.css}">
<!-- Modernizer JS -->
<script th:src="@{/assets2/js/vendor/modernizr-2.8.3.min.js}"></script>

  <!--[if lt IE 9]>
<script src="http://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="http://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>

<body>

<div th:insert="~{shopIndex::header}"></div>

<div class="page-breadcrumb-wrap">
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <div class="page-breadcrumb">
          <ul class="nav">
            <li><a th:href="@{/shopIndex}">主页</a></li>
            <li><a href="#" class="active">单一商品</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

<div id="page-content-wrapper">
  <div class="container">
    <div class="row">
      <!-- Single Product Page Content Start -->
      <div class="col-lg-12">
        <div class="single-product-page-content">
          <div class="row">
            <!-- Product Thumbnail Start -->
            <div class="col-lg-5">
              <div class="product-thumbnail-wrap">
                <div class="product-thumb-carousel owl-carousel">
                  <div class="single-thumb-item" th:each="picture:${phone.getPhonePictures()}">
                    <a href="#"><img class="img-fluid" th:src="${picture.getPicAddress()}" alt=""/></a>
                  </div>
                </div>
              </div>
            </div>
            <!-- Product Thumbnail End -->

            <!-- Product Details Start -->
            <div class="col-lg-7">
              <div class="product-details">
                <h2 th:text="${phone.getpName()}"></h2>
                <div id="wrap">
                  <div id="top">
                    <p id='model'>
                      <font>型号</font>
                      <span>4.7英寸</span>
                      <span>5.5英寸</span>
                    </p>
                    <p id='color'>
                      <font>颜色</font>
                      <span>银色</span>
                      <span>金色</span>
                      <span>深空灰色</span>
                    </p>
                    <p id='rom'>
                      <font>内存</font>
                      <span>16GB</span>
                      <span>64GB</span>
                      <span>128GB</span>
                    </p>
                    <p id='banben'>
                      <font>版本</font>
                      <span>公开版</span>
                      <span>移动赠费版</span>
                      <span>联通合约版</span>
                    </p>
                  </div>
                  <div id="bottom">
                    <p>价格： <font>￥ <span id='price' th:text="${phone.getpPrice()}"></span>.00</font></p>
                    <span>剩余数量：</span><span th:text="${phone.getpResidue()}"></span>
                    <div class="product-quantity d-flex align-items-center">
                      <button href="" class="btn btn-cart-large" id="gos" style="width: 200px">
                        <i class="fa fa-shopping-cart"></i> 添加购物车
                      </button>
                    </div>
                    <div class="product-btn-group">
                      <a href="javascript:void(0);" class="btn btn-round btn-cart" title="加入购物车" th:onclick="'javascript:indent('+${phone.getpId()}+')'"><i class="fa fa-shopping-cart"></i></a>
                      <a href="javascript:void(0);" class="btn btn-round btn-cart" title="加入收藏夹" th:onclick="'javascript:collect('+${phone.getpId()}+')'"><i class="fa fa-heart"></i></a>
                      <a href="javascript:void(0);" class="btn btn-round btn-cart" title="点击分享" th:onclick="'javascript:share('+${phone.getpId()}+')'" data-toggle="modal" data-target="#myModal"><i class="fa fa-exchange"></i></a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- Product Details End -->
          </div>

          <div class="row">
            <div class="col-lg-12">
              <!-- Product Full Description Start -->
              <div class="product-full-info-reviews">
                <!-- Single Product tab Menu -->
                <nav class="nav" id="nav-tab">
                  <a th:class="${indent eq null} ? 'active':''" id="description-tab" data-toggle="tab" href="#description">描述</a>
                  <a th:class="${indent ne null} ? 'active':''" id="reviews-tab" data-toggle="tab" href="#reviews">评论</a>
                </nav>
                <!-- Single Product tab Menu -->

                <!-- Single Product tab Content -->
                <div class="tab-content" id="nav-tabContent">
                  <div class="tab-pane fade" th:classappend="${indent eq null} ? 'active show':''" id="description">
                    <p th:text="${phone.getpDescription()}"></p>
                  </div>

                  <div class="tab-pane fade" id="reviews" th:classappend="${indent ne null} ? 'active show':''">
                    <div class="row">
                      <div class="col-lg-7">
                          <div class="rattings-wrapper" th:if="${evaluates != null}" th:each="evaluate:${evaluates}">
                            <div class="sin-rattings" style="background-color: #eaeaea;">
                              <div class="ratting-author">
                                <h3>用户名：<span style="color: #8d665a">[[${evaluate.getIndent().getUser().getuName()}]]</span></h3>
                              </div>
                              <p class="time" th:text="${evaluate.geteTime()}"></p>
                              <p style="font-size: 20px">评价：<span th:text="${evaluate.geteContent()}" style="color:#616161;"></span></p>
                            </div>
                          </div>
                          <div class="ratting-form-wrapper" th:if="${indent ne null}">
                            <h3>添加你的评价</h3>
                            <form th:action="@{/evaluate}" method="post">
                              <input type="hidden" name="pid" th:value="${phone.getpId()}">
                              <input type="hidden" name="oid" th:value="${indent}">
                              <div class="ratting-form row">
                                <div class="col-12 mb-4">
                                  <label for="your-review">你的评价:</label>
                                  <textarea name="content" id="your-review" placeholder="写下你的评价"></textarea>
                                </div>
                                <div class="col-12">
                                  <input value="点击评价" type="submit">
                                </div>
                              </div>
                            </form>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- Single Product tab Content -->
              </div>
              <!-- Product Full Description End -->
            </div>
          </div>
        </div>
      </div>
      <!-- Single Product Page Content End -->
    </div>
  </div>
</div>

<div th:insert="~{shopIndex::footer}"></div>

<!-- 分享 -->
<div class="modal fade bs-example-modal-sm" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="margin-top: 200px;">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel">分享商品</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      </div>
      <div class="modal-body" id="qrcode">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal" id="clear">关闭</button>
      </div>
    </div>
  </div>
</div>

<!-- Scroll to Top Start -->
<a href="#" class="scrolltotop"><i class="fa fa-angle-up"></i></a>
<!-- Scroll to Top End -->

<!--=======================Javascript============================-->
<!--=== Jquery Min Js ===-->
<script th:src="@{/assets2/js/vendor/jquery-3.3.1.min.js}"></script>
<!--=== Jquery Migrate Min Js ===-->
<script th:src="@{/assets2/js/vendor/jquery-migrate-1.4.1.min.js}"></script>
<!--=== Popper Min Js ===-->
<script th:src="@{/assets2/js/vendor/popper.min.js}"></script>
<!--=== Bootstrap Min Js ===-->
<script th:src="@{/assets2/js/vendor/bootstrap.min.js}"></script>
<!--=== Ajax Mail Js ===-->
<script th:src="@{/assets2/js/ajax-mail.js}"></script>
<!--=== Plugins Min Js ===-->
<script th:src="@{/assets2/js/plugins.js}"></script>

<!--=== Active Js ===-->
<script th:src="@{/assets2/js/active.js}"></script>
<script th:src="@{/js/alert.js}"></script>
<script th:src="@{/js/qrcode.js}"></script>
<script th:src="@{/js/shopIndex.js}"></script>
<script type="text/javascript">

  var mSpan = document.getElementById('model').getElementsByTagName('span');
  var cSpan = document.getElementById('color').getElementsByTagName('span');
  var rSpan = document.getElementById('rom').getElementsByTagName('span');
  var bSpan = document.getElementById('banben').getElementsByTagName('span');
  var aSpan = document.getElementsByTagName('span');
  var oModel = document.getElementById('model');
  var oRom = document.getElementById('rom');
  var oPrice = document.getElementById('price');
  var p_ri = parseInt(oPrice.innerHTML);

  mSpan[0].className = 'on';
  cSpan[0].className = 'on';
  rSpan[0].className = 'on';
  bSpan[0].className = 'on';

  for (var i=0;i<aSpan.length;i++ )
  {

    aSpan[i].onclick = function(){
      var siblings = this.parentNode.children;
      for (var j=0;j<siblings.length;j++ )
      {
        siblings[j].className = '';
      }
      this.className = 'on';

      if ( this.parentNode == oModel || this.parentNode == oRom )
      {
        price(p_ri);
      }
    };
  };

  function price(price){
    var p1 = 0;
    var p2 = 0;
    for (var i=0;i<mSpan.length;i++ )
    {
      if ( mSpan[i].className == 'on' )
      {
        p1 = i? price+200:price;
        break;
      };
    };
    for (var i=0;i<rSpan.length;i++ )
    {
      if ( rSpan[i].className == 'on' )
      {
        switch ( i )
        {
          case 0:
            p2 = 0;
            break;
          case 1:
            p2 = 800;
            break;
          case 2:
            p2 = 1600;
            break;
        }
      }
    };
    oPrice.innerHTML = p1+p2;
  };

</script>
</body>
</html>
